<template>
  <div class="panel">
    <!-- 返回按钮-->
    <!--    <div style="position: absolute; top: 10px; left: 10px; z-index: 999">-->
    <!--      <span class="text-button" @click="goBack">返回上页</span>-->
    <!--    </div>-->
    <div
      class="left-panel"
      :key="JSON.stringify(detail ?? {})"
      :style="{
        width: !showDetail ? '100%' : '0px',
      }"
    >
      <div
        :style="{
          transform: showDetail ? 'rotate(0deg)' : 'rotate(180deg)',
        }"
        class="left-arrow"
        @click.stop="handleArrow"
      >
        <img
          style="display: inline-block; margin-right: 3px"
          src="@/assets/wbs/rightRound.svg"
          alt=""
        />
      </div>
      <DrawHeader
        :detail="detail"
        :activeTab="activeTab"
        :childrenList="childrenList"
        :nameChange="nameChange"
      />
      <el-tabs
        size="small"
        style="
          --el-color-primary: #1aa1fb;
          --el-text-color-primary: #42464e;
          --el-font-size-base: 13px;
        "
        v-model="activeTab"
        class="tab-title"
      >
        <el-tab-pane
          v-for="item in computedTabItems"
          :name="item.type"
          :key="item.type"
        >
          <template #label>
            <div>
              <span
                :style="{
                  fontWeight: Object.is(activeTab, item.type) ? 500 : 400,
                }"
              >
                {{ item.title }}</span
              >

              <span v-if="[6].includes(item.id)"
                >({{ (childrenList ?? record?.children)?.length ?? 0 }})</span
              >
              <span v-if="[7].includes(item.id)">({{ 0 }})</span>
            </div>
          </template>
          <div class="tabs-detail">
            <keep-alive>
              <component
                v-if="activeTab == item.type"
                :is="item.type"
                :item="item"
                :key="item.type"
                :detail="detail"
                :subTask="subTask"
              />
            </keep-alive>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div
      class="right-panel"
      :style="{
        display: showDetail ? 'block' : 'none',
      }"
    >
      <div class="right-header">
        <div style="margin-right: auto">基础字段</div>
        <img
          style="display: inline-block; margin-right: 3px"
          src="@/assets/wbs/share.svg"
          alt=""
        />
      </div>

      <FormDetail :data="formDataDetail" @update:data="updateFormData" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from "vue";
  import { componentsList, AllTabs } from "./const.ts";
  import { getTaskDetail, taskEdit } from "./api";
  import DrawHeader from "./DrawHeader.vue";
  import FormDetail from "@/components/wbsDraw/FormDetail.vue";
  import { useRoute, useRouter } from "vue-router";
  const route = useRoute();

  const detail = ref<any>();
  const formDataDetail = computed(() => {
    const planned = [
      detail.value?.plannedStartTime ?? "",
      detail.value?.plannedEndTime ?? "",
    ];
    const actual = [
      detail.value?.actualStartTime ?? "",
      detail.value?.actualEndTime ?? "",
    ];
    return { ...detail.value, planned, actual };
  });
  const loading = ref(false);
  const showDetail = ref(true);
  const visible = ref(false);
  const activeTab = ref<string>("DrawDetail");
  const computedTabItems = ref(AllTabs);
  const childrenList = ref();

  defineOptions({
    components: componentsList,
  });
  defineProps([
    "size",
    "fields",
    "record",
    "mode",
    "routerFields",
    "clearSelectRecord",
  ]);
  defineExpose({
    visible,
  });

  const emit = defineEmits();

  /**
   * @description 处理子任务变更
   */
  const subTask = (list: any) => {
    childrenList.value = list;
  };

  /**
   * @description 处理名称变化
   */
  const nameChange = (obj: any) => {
    obj.name = obj.name["zh_CN"];
    emit("update:formData", obj);
    // 同步
  };

  /**
   * @description 处理折叠按钮
   */
  const handleArrow = () => {
    showDetail.value = !showDetail.value;
  };

  /**
   * @description 处理详情变化，获取数据
   */
  const updateFormData = async (args: any) => {
    try {
      const params = { ...detail?.value, ...args };
      params.plannedStartTime = args.planned[0] ?? "";
      params.plannedEndTime = args.planned[1] ?? "";
      params.actualStartTime = args.actual[0] ?? "";
      params.actualEndTime = args.actual[1] ?? "";
      delete params.planned;
      delete params.actual;

      await taskEdit(params);
      params.name = params.name["zh_CN"];
      // 同步列表页
      emit("update:formData", params);
    } catch (error) {}
  };

  /**
   * @description 获取数据
   */
  const getDetail = async () => {
    loading.value = true;
    try {
      const taskId: any = route.query.taskId;
      if (taskId) {
        const res = await getTaskDetail(taskId);
        res.lifecycleCurrentNode.process ??= 0;
        detail.value = res ?? {};
      }
    } catch (error) {
    } finally {
      loading.value = false;
    }
  };
  const router = useRouter();
  const goBack = () => {
    router.go(-1);
  };
  onMounted(() => {
    getDetail();
  });
</script>

<style scoped lang="scss">
  :deep(
    .el-tabs.el-tabs--top
      > .el-tabs__header
      .el-tabs__nav-scroll
      .el-tabs__nav
      .el-tabs__active-bar
  ) {
    height: 3px;
  }
  :deep(.el-tabs__nav) {
    padding-right: 0px;
  }
  :deep(.el-tabs__nav-wrap:after) {
    height: 1px;
  }
  :deep(.el-tabs__header) {
    margin-bottom: 0px;
  }
  :deep(.el-tabs__item) {
    padding: 0px 5px;
  }
  :deep(.el-tabs) {
    --el-tabs-header-height: 30px;
  }
  .text-button {
    color: #1aa1fb;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    user-select: none;
    font-weight: 500;
    font-size: 14px;

    &:hover {
      background-color: #f0f8ff;
      transform: scale(1.05);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  .noData {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  .panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    height: 100%;

    overflow: hidden;
    background: #ffffff;
    .left-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
      padding: 36px 0px 0px 24px;
      .left-arrow {
        position: absolute;
        top: 50%;
        right: -20px;
        cursor: pointer;
        z-index: 100;
      }
      .tab-title {
        flex: 1;
        font-size: 13px;
        color: #42464e;
        font-weight: 400;
        .tabs-detail {
          overflow: auto;
          height: calc(100vh - 150px);
        }
      }
    }

    .right-panel {
      box-sizing: border-box;
      width: 320px;
      max-height: 100%;
      overflow: auto;
      background: #f6f7fa;
      border: 1px solid #e6e6e6;
      padding: 24px;
      .right-header {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 5px;
      }
    }
  }

  .left-menu-container {
    box-sizing: border-box;
    position: absolute;
    right: 0px;
    width: 32px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: -10px 0px 16px rgba(0, 0, 0, 0.06);
    border-radius: 3px;
  }

  .left-menu {
    box-sizing: border-box;
    width: 32px;
    height: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 40%;
  }

  .menu-item {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px 0;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #626365;
    border: 1px solid transparent;
    border-radius: 3px;
  }

  .menu-item.active {
    background-color: #e8f1fb;
    color: #1aa1fb;
    border-color: #e8f1fb;
  }

  .menu-item.active img {
    filter: brightness(0) saturate(100%) invert(49%) sepia(92%) saturate(3618%)
      hue-rotate(190deg) brightness(104%) contrast(101%);
  }

  .menu-icon {
    filter: invert(40%) sepia(0%) saturate(0%) hue-rotate(180deg)
      brightness(90%) contrast(90%);
  }

  .tab-content-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
</style>
